<template>
  <div
    style="
      background: #cce5ff;
      padding: 8px;
      border-radius: 8px;
      margin-bottom: 8px;
    "
  >
  <div style="display:flex;margin-bottom:16px;">
    <div style="flex: 1 1 auto;">
      <b>涉及词语</b>
    </div>
    
    <div style="flex: 0 0 25px;">
      <AddRefer :id="props.id" :cb="loadPageData"></AddRefer>
    </div>
  </div>


    
    <span
      style="display: inline-block; margin: 2px"
      v-for="pmpItemId in referList"
      :key="`pmpItemId_${pmpItemId}`"
    >
      <PmpItemName :id="pmpItemId" type="text"></PmpItemName>
    </span>
  </div>
</template>

<script setup>
/**
 * 涉及词语展示
 *
 */
import { ref, onMounted, watch } from "vue";
import pmpHooks from "@/hooks/PmpHooks.js";
import CONSTANTS from "@/constants/Constants.js";
import AddRefer from "@/components/AddRefer.vue";

const referList = ref([]);
const title = ref("");

const props = defineProps({
  // pmpItem的id
  id: {
    type: String,
    default: () => "",
  },
});

onMounted(async () => {
  loadPageData();
  //   data.value = pmpHooks.loadPmpDictDetail(props.id)
  //   title.value = pmpHooks.loadPmpDictDetail(props.id).nameCn
});

watch(
  () => props.id,
  async (v) => {
    loadPageData();
    // data.value = pmpHooks.loadPmpDictDetail(v)
    // title.value = pmpHooks.loadPmpDictDetail(v).nameCn
  }
);

async function loadPageData() {
  const res = await pmpHooks.queryPmpReferList(props.id);
  // alert(JSON.stringify(res))
  referList.value = res.result;
}
</script>

<style>
</style>